<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[2,4,6,8]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="pageData.total"
  ></el-pagination>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
const { mapMutations, mapActions, mapState } = createNamespacedHelpers(
  "goodsList"
);
export default {
  data() {
    return {
      pageNum: 1
    };
  },
  computed: {
    ...mapState(["currentPage", "pageSize", "pageData"]),
  },
  methods: {
    ...mapActions(["getGoodsAsync", "changePageAsync","changeSizeAsync"]),
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function(size) {
      this.pagesize = size;
      this.changeSizeAsync(size);
      this.getGoodsAsync();
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage) {
      // this.changePage(currentPage);
      this.changePageAsync(currentPage);
      this.getGoodsAsync();
      console.log(currentPage); //点击第几页
      console.log(this.currentPage);
      console.log(this.pageData)
    }
  }
};
</script>